<template>
  <div class="flex-col-center width-100-percent">
    <div class="width-100-percent box-shadow-common bg-black" ref="carouselRef" >
      <el-carousel :height="carouselHeight"  direction="vertical" autoplay loop>
        <el-carousel-item v-for="(image,index) in carouselImageList" :key="index">
          <y-image :src="image"  class="width-100-percent" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="flex-col-center-start width-100-percent margin-col-20">
      <h1>热门方案</h1>
      <public-scheme-box :scheme-list="hotSchemeList"></public-scheme-box>
    </div>

    <div class="flex-col-center-start width-100-percent margin-col-20">
      <h1>最多收藏</h1>
      <public-scheme-box :scheme-list="hotSchemeList"></public-scheme-box>
    </div>

    <div class="flex-col-center-start width-100-percent margin-col-20">
      <h1>评价最高</h1>
      <public-scheme-box :scheme-list="hotSchemeList"></public-scheme-box>
    </div>

    <div class="flex-col-center-start width-100-percent margin-col-20">
      <h1>儿童专区</h1>
      <public-scheme-box :scheme-list="hotSchemeList"></public-scheme-box>
    </div>

    <div class="flex-col-center-start width-100-percent margin-col-20">
      <h1>免费专区</h1>
      <public-scheme-box :scheme-list="hotSchemeList"></public-scheme-box>
    </div>
    <div class="margin-col-20">
      <button1 bg-color="var(--theme-color)">查看更多</button1>
    </div>

    <BackTop></BackTop>
  </div>
</template>

<script setup lang="ts">

import {SchemeShowCardType} from "@/components/scheme/SchemeShowCard.vue";
import { onMounted, reactive, ref} from "vue";

import Button1 from "@/components/button/Button1.vue";
import YImage from "@/components/img/YImage.vue";
import PublicSchemeBox from "@/components/scheme/PublicSchemeBox.vue";
import BackTop from "@/components/backtop/BackTop.vue";
let hotSchemeList = reactive<SchemeShowCardType[]>([])
let carouselRef=ref()
let carouselHeight=ref("500px")
// 要求图片格式：长/宽=3
let carouselImageList=reactive<string[]>([
    "http://119.3.255.192:9999/upload/01b8a660765af411013e87f4c2aaca.webp",
  "http://119.3.255.192:9999/upload/01a2c260765af411013e87f40a3fe5.webp",
  "http://119.3.255.192:9999/upload/01b8a660765af411013e87f4c2aaca.webp",

])
function initCarouselHeight(){
  carouselHeight.value=carouselRef.value.clientWidth/2+'px'
}
onMounted(()=>{
  initCarouselHeight()
})

</script>

<style scoped lang="less">

</style>